<template>
  <div class="page" v-if="!isShowSuccess">
    <div class="Alipay" v-if="!isShowSuccess">
      <p>扫一扫付款</p>
      <p>{{ amount }}元</p>
      <qrcode :text="text"></qrcode>
      <p style="margin-top: 10px" v-if="paymentMethod == 'ALIPAY'">打开手机支付宝</p>
      <p style="margin-top: 10px" v-if="paymentMethod == 'WECHAT'">打开手机微信</p>
      <p>扫一扫继续付款</p>
    </div>
  </div>
  <div v-else>
    <el-empty :image="img" description="支付完成" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import { pay, cashierResult } from '@/api/control/myRecharge';
import qrcode from '@/components/qrcode/index.vue';
import img from '@/assets/img/client/cloudMarketplace/components/success.png';
const route = useRoute();
const text = ref('');//二维码内容

//请求参数
const paymentMethod = ref<any>('');
const sn = ref<any>('');
const amount = ref<any>(1);
const isShowSuccess = ref(false);
const timer = ref();

onMounted(() => {
  paymentMethod.value = route.query.paymentMethod;
  isShowSuccess.value = paymentMethod.value == 'BANK_TRANSFER' ? true : false;
  sn.value = route.query.sn;
  amount.value = route.query.amount;
  goPay();
  getCashierResult();
})

onUnmounted(() => {
  clearTimer()
})
/**调起收银台 */
const goPay = () => {
  if (paymentMethod.value != 'BANK_TRANSFER') {
    pay(paymentMethod.value, 'NATIVE', { orderType: 'ORDER', clientType: 'NATIVE', sn: sn.value }).then((res: any) => {
      if (200 == res.code) {
        text.value = res.msg;
      }
    })
  }
};

const getCashierResult = () => {
  if (paymentMethod.value != 'BANK_TRANSFER') {
    let data = {
      orderType: 'ORDER',
      sn: sn.value,
      clientType: 'NATIVE'
    };
    let isGetPaySuccess = false;
    timer.value = window.setInterval(() => {
      setTimeout(async () => {
        cashierResult(data).then((res: any) => {
          console.log(res, '支付结果');
          if (!isGetPaySuccess && res.data === true) {
            isGetPaySuccess = true;
            isShowSuccess.value = true;
            clearInterval(timer.value);
          }
        });
      }, 0);
    }, 1000)
  }
};

const clearTimer = () => {
  clearInterval(timer.value);
};

</script>

<style scoped lang="less">
.page {
  padding-top: 200px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;

  .Alipay {
    padding: 20px;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .unionPay {
    display: flex;
    flex-wrap: wrap;

    .unionPayImg {
      width: 200px;
      height: 50px;
      margin-right: 20px;
      margin-top: 20px;
    }
  }
}
</style>
